<template>
	<view>
		<my-search></my-search>
		
	
		<view style="display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; background-color: white;">
			
			<view class="cate" @click="to_cate" data-type="教材">
				<image src="../../static/cate/book.png" class="cate_img"></image>
				<text class="cate_text">教材</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="电子产品">
				<image src="/static/cate/electron.png" class="cate_img"></image>
				<text class="cate_text">电子产品</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="交通">
				<image src="/static/cate/bicycle-solid.png" class="cate_img"></image>
				<text class="cate_text">交通</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="衣服">
				<image src="/static/cate/cloth.png" class="cate_img"></image>
				<text class="cate_text">衣服</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="运动">
				<image src="../../static/cate/sport.png" class="cate_img"></image>
				<text class="cate_text">运动</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="食品">
				<image src="../../static/cate/food.png" class="cate_img"></image>
				<text class="cate_text">食品</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="文具">
				<image src="../../static/cate/writing.png" class="cate_img"></image>
				<text class="cate_text">文具</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="生活用品">
				<image src="../../static/cate/life.png" class="cate_img"></image>
				<text class="cate_text">生活用品</text>
			</view>
			
			<view class="cate" @click="to_cate" data-type="其他">
				<image src="../../static/cate/else.png" class="cate_img"></image>
				<text class="cate_text">其他</text>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		data() {
			return {

			};
		},
		onLoad() {
			const phone_info = uni.getSystemInfoSync()
			this.phone_height = phone_info.windowHeight - 50	
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['total']),
			...mapGetters('m_cart', ['pay_total'])
		},
		onShow() {
			this.setCartNum()
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		methods: {
			to_cate(e) {
				uni.navigateTo({
					url: '/subpkg/type/type?cate=' + e.currentTarget.dataset.type
				})
			},
			setCartNum() {
				if(this.pay_total == 0){
					uni.hideTabBarRedDot({
						index: 3,
					})
				}else{
					uni.setTabBarBadge({
						index: 3,
						text: this.pay_total + ''
					})
				}		
			},
		}
	}
</script>

<style lang="scss">
	
	.cate {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		height: 175px;
		border-bottom: 1px solid #efefef;
		border-right: 1px solid #efefef;
		box-sizing: border-box;
		
	}
	
	.cate_text {
		font-weight: bold;
		font-size: 13px;
	}
	
	.cate_img {
		width: 50px;
		height: 50px;
		margin-bottom: 4px;
	}

	.left {
		width: 30%;
		background-color: #efefef;
	}
	
	.left_item {
		line-height: 60px;
		text-align: center;
		background-color: #f7f7f7;
		font-size: 12px;
		border-bottom: 0.5px solid silver;
	}
	
	
	.left_active {
		line-height: 60px;
		text-align: center;
		background-color: white;
		font-size: 12px;
		position: relative;
		
		&::before {
			content: ' ';
			display: block;
			width: 3px;
			height: 30px;
			background-color: red;
			position: absolute;
			top:25%;
		}
	}
	
	.right_title {
		font-weight: bold;
		font-size: 17px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.right_img {
	  width: 30%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;

	  margin-right: 7px;
	}
	
	.right_img image {
		width: 70px;
		height: 70px;
	}
	
	.right_text {
		  font-size: 13px;
		  margin-bottom: 10px;
		  
	}
</style>
